<template>
	<view class="forget-layout">
		<uv-gap bgColor="#f7f7f7" height="20rpx"></uv-gap>
		<xh-input v-model="formParams.phone" placeholder="请输入手机号" keyboardType="number" :maxCount="11"></xh-input>
		<xh-input placeholder="请输入新密码(6~18位,数字+字母组合)" v-model="formParams.password" :isEye="true" :password="true" :maxCount="18"></xh-input>
		<xh-input placeholder="请再次输入新密码" v-model="formParams.surePassword" :isEye="true" :password="true" :maxCount="18"></xh-input>
		<xh-input placeholder="请输入验证码" keyboardType="number" v-model="formParams.code" :maxCount="6">
			<template #right>
				<text class="code-btn" :class="[isStartTime ? 'code-btn-select' : '']" @tap="checkedPhone">{{isStartTime ? `${seconds}秒后重试` : '获取验证码'}}</text>
			</template>
		</xh-input>
		<view class="tel-box">
			<text>短信验证码收不到？请致电</text>
			<text class="tel-text" @tap="callMakeTel">{{CUSTOMSERVICE_TEL}}</text>
		</view>
		<view class="btn-box">
			<view class="submit-btn" style="margin: 0;" @tap="submit">确认</view>
		</view>
	</view>
</template>

<script setup>
	import { onUnload } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { totalSeconds, CUSTOMSERVICE_TEL } from '@/common/config/config.js'
	import { sendCaptchaCheckedPhone,sendCaptcha,resetPassword} from '@/common/api/api.js'
	//是否开始倒计时
	const isStartTime = ref(false)
	const seconds = ref(totalSeconds)
	//计时器
	let timer = null
	// 表单数据
	const formParams = ref({
		phone: '',//手机号
		password: '',//密码
		surePassword: '',//确认密码
		code: ''//验证码
	})
	// 校验手机号
	const checkedPhone = async ()=>{
		if (isStartTime.value) {
			return
		}
		if(!uni.$uv.test.mobile(uni.$uv.trim(formParams.value.phone, 'all'))) {
			uni.$utils.showToast('请输入正确的手机号')
			return
		}
		const res = await sendCaptchaCheckedPhone({phoneNumber:uni.$uv.trim(formParams.value.phone, 'all')})
		if(uni.$uv.test.empty(res.result.tel)){
			uni.$utils.showToast('该手机号未注册，无法找回登录密码')
			return
		}
		startSendSms()
	}
	// 发送验证码
	const startSendSms = async ()=>{
		let params = {}
		params.phoneNumber = uni.$uv.trim(formParams.value.phone, 'all')
		params.smsType = 'Repassword'
		await sendCaptcha(params)
		startTimer()
	}
	//开始倒计时
	const startTimer = () => {
		isStartTime.value = true
		//每秒执行一次
		timer = setInterval(() => {
			seconds.value -= 1
			if (seconds.value == 0) {
				seconds.value = totalSeconds
				isStartTime.value = false
				clearInterval(timer)
			}
		}, 1000)
	}
	// 联系客服
	const callMakeTel = ()=>{
		uni.makePhoneCall({
			phoneNumber:CUSTOMSERVICE_TEL
		})
	}
	// 提交
	const submit = async () => {
		if(!uni.$uv.test.mobile(uni.$uv.trim(formParams.value.phone, 'all'))) {
			uni.$utils.showToast('请输入正确的手机号')
			return
		}
		else if(uni.$uv.test.empty(formParams.value.password)) {
			uni.$utils.showToast('请输入新密码')
			return
		}
		else if(!uni.$utils.checkPassword(formParams.value.password)) {
			uni.$utils.showToast('密码必须是6~18位数字+字母组合')
			return
		}
		else if(uni.$uv.test.empty(formParams.value.surePassword)) {
			uni.$utils.showToast('请再次输入新密码')
			return
		}
		else if(formParams.value.password != formParams.value.surePassword) {
			uni.$utils.showToast('两次输入的密码不一致')
			return
		}
		else if(uni.$uv.test.empty(formParams.value.code)) {
			uni.$utils.showToast('请输入验证码')
			return
		}
		let params = {}
		params.phoneNumber = uni.$uv.trim(formParams.value.phone, 'all')
		const pwdRes = uni.$utils.passwordEncrypt(formParams.value.password)
		params.password = pwdRes
		params.confirmPassword = pwdRes
		params.smsCode = formParams.value.code
		await resetPassword(params)
		uni.redirectTo({
			url:'/pages/login/reset-result/reset-result?title=找回密码'
		})
	}
	onUnload(() => {
		if (timer) {
			clearInterval(timer)
		}
	})
</script>

<style lang="scss" scoped>
	.forget-layout {
		background-color: white;
		min-height: 100vh;
		.code-btn {
			color: $xh-theme-color;
			margin-left: 10rpx;
			font-size: 28rpx;
		}

		.code-btn-select {
			color: #cccccc;
		}

		.tel-box {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			font-size: 24rpx;
			color: $xh-color-9;

			.tel-text {
				color: $xh-theme-color;
				margin-left: 6rpx;
			}
		}

		.btn-box {
			padding: 30rpx;
		}
	}
</style>